<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import ReCol from "@/components/ReCol";
import { statistics_customer } from "@/api/index";
import { ChartBar } from "../../components/charts";
import Segmented from "@/components/ReSegmented";

import { ArrowRight } from "@element-plus/icons-vue";

const props = defineProps({
  element: {
    type: Object,
    required: true,
  },
});

let curWeek = ref(0);
const optionsBasis = reactive([
  {
    label: "近两周",
    type: 1
  },
  {
    label: "本年",
    type: 2
  }
]);

const deal_price_c = ref(0)
const visit_c = ref(0)
const timeData = ref([])
const requireData = ref([])
const questionData = ref([])

onMounted(() => {
  getCustomerDirectorData()
});

function getCustomerDirectorData() {
  let type = optionsBasis[curWeek.value].type
  statistics_customer({ type }).then((res) => {
    let resData = res.data.list
    deal_price_c.value = res.data.deal_price_c
    visit_c.value = res.data.visit_c
    if (type == 1) timeData.value = resData.map(item => Number(item.day.split('-')[2]) + '号')
    else timeData.value = resData.map(item => Number(item.day) + '月')
    requireData.value = resData.map(item => item.visit)
    questionData.value = resData.map(item => item.deal_price)
  });
}
</script>

<template>
  <re-col
    v-motion
    class="mb-[12px]"
    :value="16"
    :xs="24"
    :sm="24"
    :md="24"
    :initial="{
      opacity: 0,
      y: 100
    }"
    :enter="{
      opacity: 1,
      y: 0,
      transition: {
        delay: 400
      }
    }"
  >
    <el-card class="bar-card" shadow="never">
      <div class="flex justify-between">
        <b class="text-md font-medium" v-if="props.element.scope == 'company'">客户跟进概览</b>
        <b class="text-md font-medium" v-if="props.element.scope == 'department'">组内客户跟进概览</b>
        <b class="text-md font-medium" v-if="props.element.scope == 'self'">我的客户跟进概览</b>
        <Segmented v-model="curWeek" :options="optionsBasis" @change="getCustomerDirectorData" />
      </div>
      <div class="flex justify-between items-start mt-3">
        <div class="statistics">
          <div class="list">
            <div class="item">
              <div class="title">
                <span style="background-color: #5456e9"></span>近两周累计到访
              </div>
              <div class="number">{{ visit_c }}个</div>
            </div>
            <div class="item">
              <div class="title">
                <span style="background-color: #47b0ec"></span>近两周累计成交
              </div>
              <div class="number">￥{{ deal_price_c }}</div>
            </div>
          </div>

          <el-button round style="padding: 8px"
            >了解更多<el-icon class="el-icon--right"><ArrowRight /></el-icon
          ></el-button>
        </div>

        <ChartBar
          :timeData="timeData"
          :requireData="requireData"
          :questionData="questionData"
        />
      </div>
    </el-card>
  </re-col>
</template>

<style lang="scss" scoped>
.statistics {
  height: 280px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  .list {
    .item {
      margin-bottom: 36px;

      .title {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #666666;

        span {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #60d1d1;
          display: block;
          margin-right: 5px;
        }
      }

      .number {
        padding-left: 12px;
        margin-top: 8px;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}
</style>
